<template>
    <div class="person">
        <h2>姓名：{{ player.name }}</h2>
        <h2>位置：{{ player.position }}</h2>
        <button @click="changePos">修改位置</button>
        <button @click="changePlayer">修改球员</button>
        <!-- <hr>
        <h2>游戏列表：</h2>
        <ul>
            <li v-for="game in games" v-bind:key="game.name">{{ game.name }}</li>
        </ul>
        <button v-on:click="changeFirstGame">修改第一个游戏的名字</button> -->
    </div>
</template>

<script setup lang="ts" name="Persona">
    import { reactive } from 'vue'  // reactive 函数将对象类型数据转化为响应式数据（只能定义对象类型）
    import { ref } from 'vue'       // 使用 ref 对对象进行响应式，还是注意 RefImpl 对象的 value 属性保存真实的数据
    let player = reactive({
        name: 'zzq',
        position: 'PF',
        shooting: 'A'
    })
    // let games = ref([
    //     {name: "Balder's Gate", price: 298},
    //     {name: 'Sora no Kiseki', price: 98}
    // ])

    console.log(player)             // 此时 player 是一个 proxy 对象，并且不论对象层次多深都可以变为响应式（数组、函数都是对象）
    let pos = ['PG', 'SG', 'SF', 'PF', 'C']
    function changePos(){
        let idx = pos.indexOf(player.position.toUpperCase())   
        console.log(`pos idx 原本是 ${idx}`)
        idx = ++idx % 5
        console.log(`pos idx 现在是 ${idx}`)
        player.position = pos[idx]
    }
    function changePlayer(){
        let new_player = {
            name: 'lin',
            position: 'SF',
            shooting: 'A+'
        }

        player = new_player             // 1、直接替换对象：失去响应式
        player = reactive(new_player)   // 2、使用 reactive 处理对象：仍会失去响应式
        {
            // 3、单独替换对象属性：这样不会失去响应式但十分繁琐，不推荐
            player.name = new_player.name
            player.position = new_player.position
            player.shooting = new_player.shooting
        }
        Object.assign(player, new_player)   // 4、Object.assign(obj1, obj2, obj3,...) 将 obj2、obj3...的属性添加到 obj1 里，有同名属性则替换掉，可以完成单独替换属性的任务，推荐
    }
    // function changeFirstGame(){
    //     games.value[0].name = "Baldur's Gate"
    // }
</script>

<style scoped>
.person {
    background-color: #d8a7af;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 20px;
    margin: 10px 0;
}
</style>
